<template>
  <div class="xq_zhu">
    <div class="xq_tou">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/userhome/user_dindan' }"
          >我的订单</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单：{{ this.orderId }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="box-card xq_statu">
      <div class="status" v-if="this.order.status == 1">
        当前状态：{{
          this.address == null
            ? this.order.status == 1
              ? "充值成功"
              : "待支付"
            : this.order.status == 1
            ? "待发货"
            : "待支付"
        }}
      </div>
      <div class="status" v-else-if="this.order.status == 2">
        当前状态：{{
          this.address == null
            ? this.order.status == 1
              ? "充值成功"
              : "待支付"
            : this.order.status == 2
            ? "待收货"
            : "待支付"
        }}
      </div>
      <div class="status" v-else-if="this.order.status == 3">
        当前状态：{{
          this.address == null
            ? this.order.status == 1
              ? "充值成功"
              : "待支付"
            : this.order.status == 3
            ? "已完成"
            : "待支付"
        }}
      </div>
      <div class="status" v-else-if="this.order.status == 0">
        当前状态：{{
          this.address == null
            ? this.order.status == 1
              ? "充值成功"
              : "待支付"
            : this.order.status == 3
            ? "已完成"
            : "待支付"
        }}
      </div>

      <div class="tips">
        <div class="row">
          <div class="txt">
            <span v-if="this.order.status == 0"
              >亲，{{
                this.address == null
                  ? this.order.status == 1
                    ? "感谢您的充值"
                    : "充值订单您还未支付呢"
                  : this.order.status == 1
                  ? "商品会马上为您发货的哦"
                  : "订单您还未支付呢"
              }}</span
            >
            <span v-else-if="this.order.status == 3">{{
              this.address == null
                ? this.order.status == 1
                  ? "感谢您的充值"
                  : "充值订单您还未支付呢"
                : this.order.status == 3
                ? "感谢您的购买,记得评价哦"
                : "订单您还未支付呢"
            }}</span>

            <span v-else-if="this.order.status == 1">{{
              this.address == null
                ? this.order.status == 1
                  ? "感谢您的充值"
                  : "充值订单您还未支付呢"
                : this.order.status == 1
                ? "商品会马上为您发货的哦"
                : "订单您还未支付呢"
            }}</span>
            <span v-else-if="this.order.status == 2">{{
              this.address == null
                ? this.order.status == 1
                  ? "感谢您的充值"
                  : "充值订单您还未支付呢"
                : this.order.status == 2
                ? "商品会马上为您发货的哦"
                : "订单您还未支付呢"
            }}</span>
          </div>
        </div>
      </div>
      <button
        class="plainBtn btn"
        @click="dialogVisible_pay1 = true"
        v-if="this.address != null && this.order.status == 0"
      >
        立即支付
      </button>
      <button
        class="plainBtn btn"
        v-else-if="this.address != null && this.order.status == 1"
      >
        催一下
      </button>
      <button
        class="plainBtn btn"
        @click="queren(orderId)"
        v-else-if="this.address != null && this.order.status == 2"
      >
        确定收货
      </button>
      <button
        class="plainBtn btn"
        @click="pj()"
        v-else-if="this.address != null && this.order.status == 3"
      >
        评价
      </button>
    </el-card>

    <div class="order-info">
      <div class="title">订单信息</div>
      <div v-if="address != null" class="user-info">
        <div class="row">
          <div class="name">收货人信息：</div>
          <div class="txt">
            {{ this.address.receiveName }}（{{
              this.address.receivePhoneNumber
            }}）
          </div>
        </div>
        <div class="row">
          <div class="name">收货地址：</div>
          <div class="txt">
            {{ this.address.receiveProvince }}{{ this.address.receiveCity
            }}{{ this.address.receiveCounty }}{{ this.address.receiveDesc }}
          </div>
        </div>

        <div class="row">
          <div class="name">期望送货日期：</div>
          <div class="txt">2021-10-22</div>
        </div>

        <div class="row">
          <div class="name">期望配送时间：</div>
          <div class="txt">09:00-21:00</div>
        </div>

        <div class="row">
          <div class="name">应付金额：</div>
          <div class="txt">
            <b class="red">¥{{ this.order.payment }}</b>
            <span>{{
              this.order.paymentType == 1 ? "支付宝支付" : "余额支付"
            }}</span>
          </div>
        </div>

        <div class="row">
          <div class="name">店铺名称：</div>
          <div class="txt">
            <span>华哲自营书店</span>
            <a
              class="btn-im"
              target="_blank"
              title="联系卖家"
              clstag="firsttype|keycount|jdworldwideplorderdetail|chat"
              ><i></i>联系客服</a
            >
          </div>
        </div>
      </div>

      <div v-else class="user-info">
        <div class="row">
          <div class="name">充值Id：</div>
          <div class="txt">
            {{ this.order.userId }}
          </div>
        </div>

        <div class="row">
          <div class="name">下单时间 ：</div>
          <div class="txt">{{ this.order.createTime }}</div>
        </div>

        <div class="row">
          <div class="name">应付金额：</div>
          <div class="txt">
            <b class="red">¥{{ this.order.payment }}</b>
            <span v-if='this.order.paymentType!=1||this.order.paymentType!=0'>{{
              this.order.paymentType == 1 ? "余额支付" : "支付宝支付"
            }}</span>
            
          </div>
        </div>

        <div class="row">
          <div class="name">店铺名称：</div>
          <div class="txt">
            <span>华哲自营书店</span>
            <a
              class="btn-im"
              target="_blank"
              title="联系卖家"
              clstag="firsttype|keycount|jdworldwideplorderdetail|chat"
              ><i></i>联系客服</a
            >
          </div>
        </div>
      </div>
    </div>

    <div v-if="this.address != null" class="text item xq_booklist">
      <el-table
        ref="multipleTable"
        :data="order_list"
        tooltip-effect="dark"
        @select="selectCall()"
        style="width: 100%"
      >
        <el-table-column width="110" align="center">
          <template slot-scope="scope">
            <el-image
              style="height: 80px;width:60px"
              :src=" scope.row.bookDetail.img"
            >
              <!-- <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div> -->
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="图书商品信息" width="280">
          <template slot-scope="scope">
            <p>{{ scope.row.bookDetail.title }}</p>
            <p>{{ scope.row.bookDetail.author }}</p>
          </template>
        </el-table-column>

        <el-table-column label="单价" width="100">
          <template slot-scope="scope">
            <p>￥{{ scope.row.bookDetail.price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="200" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.bookCount }}</p>
          </template>
        </el-table-column>

        <el-table-column label="小计" width="150">
          <template slot-scope="scope">
            <p style="color: red">
              {{
                scope.row.bookDetail.price * scope.row.bookCount
              }}元
            </p>
          </template>
        </el-table-column>

        <!-- <template slot-scope="scope">
              <i class="el-icon-delete" style="font-size: 25px;"></i>
            </template> -->
      </el-table>
    </div>

    <div class="xq_price">
      <div class="price-info presale-price-info">
        <div class="detail">
          <div class="row">
            <div class="name">商品总额：</div>
            <div class="cost">¥{{ this.order.payment-6 }}</div>
          </div>
          <div class="row">
            <div class="name">返现：</div>
            <div class="cost">-¥0.00</div>
          </div>
          <!-- <div class="row">
            <div class="name">
              <span><i class="plus95-icon"></i></span>PLUS专享95折：
            </div>
            <div class="cost">-¥0.00</div>
          </div> -->
          <div class="row">
            <div class="name" v-if="address != null">运费：</div>
            <div class="cost">¥6.00</div>
          </div>
        </div>
        <span class="clr"></span>
        <div class="total">
          <div class="name">应付金额：</div>
          <div class="cost">¥{{ this.order.payment }}</div>
        </div>
      </div>
    </div>
    <!-- 选择支付方式 -->
    <el-dialog
      title="选择支付方式"
      :visible.sync="dialogVisible_pay1"
      width="30%"
      height="600px"
      class="dindan_pay"
    >
        <el-dialog
        title="余额支付"
        :visible.sync="showKeyboard"
        append-to-body
        width="20%"
      >
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
          autocomplete="off"
        ></el-input>

        <div slot="footer" class="dialog-footer">
          <el-button @click="showKeyboard = false">取 消</el-button>
          <el-button type="primary" @click="yue_qd()">确 定</el-button>
        </div>
      </el-dialog>
      <a @click="zfb" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="../../assets/zfb.jpg"
          alt=""
        />
        <p>支付宝</p>
      </a>
      <a @click="ye" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="https://storage.360buyimg.com/payment-assets/sdk/bank/XJKCONSUME.png"
          alt=""
        />
        <p>余额支付</p>
      </a>
      <a @click="wx" class="pay_type">
        <img
          style="width: 100px; height: 100px; margin-top:0px "
          src="//storage.360buyimg.com/payment-assets/sdk/bank/PAY-WEIXIN.png"
          alt=""
        />
        <p>微信支付</p>
      </a>
      <a slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_pay1 = false">取 消</el-button>
      </a>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogVisible_pay1: false, //选择支付弹窗
      address: "", //订单收货地址
      order: "", //订单信息
      order_list: [], //订单商品列表
      orderId: "", //订单编号
      pay_type: 1,
      showKeyboard: false,
      password: ""
    };
  },
  methods: {
    queren(order) {
      //确认收货
      this.$confirm("是否确认收货?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new URLSearchParams();
          params.append("orderId", order);
          axios.post("/fl-bookOrder/acknowledgeReceipt", params).then((res) => {
            ;
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
              let list = JSON.parse(localStorage.getItem("user_order"));
              for (let item of list) {
                if (item[item.length - 1].orderId == order) {
                  item[item.length - 1].orderStatus = 3;
                }
              }
              this.$store.commit("SET_ORDER", list);
              this.statusList.dsh--;
              this.$router.go(0);
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消确认收货",
          });
        });
    },
    pj(orderId) {
      //评价
      this.$notify.info({
        title: "消息",
        message: "本网站评价板块暂未开通",
      });
    },
    get_order() {
      //获取订单详细信息
      axios
        .get(
          "/fl-bookOrder/serachOrderByOrderId/" +
            this.orderId
        )
        .then((res) => {
          console.log(res);
          this.address = res.data.data[0];
          this.order = res.data.data[1];
          this.order_list = res.data.data.slice(2, res.data.data.length);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    zfb() {
      ;
      console.log(
        "/aliPay/pcPay?orderId=" +
          this.orderId +
          "&type=" +
          this.pay_type +
          ", _parent"
      );
      this.$message({
        message: "下单成功，正在为您跳转到支付页面",
        type: "success",
      });

      window.open(
        "https://end.flya.top/aliPay/pcPay?orderId=" +
          this.orderId +
          "&type=" +
          this.pay_type
      );
      // window.showModalDialog('/aliPay/pcPay?orderId='+this.orderId,window)

      //根据订单id查询订单支付状态
      //如果未支付则让页面跳转支付页面

      //查询用户支付结果
      //     //成功则router跳转到订单详情页面
    },
    ye() {
      ;

      if (this.pay_type == 2) {
        this.$notify({
          title: "警告",
          message: "您这是余额充值余额,不好意思,这里禁止套娃",
          type: "warning",
        });
      } else {
        ;

        if (this.$store.getters.getUser.accountBalance < this.price) {
          this.$confirm("您的余额不足是否充值?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$router.push("/pay");
              this.$message({
                type: "success",
                message: "请充值!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
          this.showKeyboard = true;
         
        }
      }
    },
        yue_qd(){
             let params = new URLSearchParams();
          params.append("orderId", this.orderId);
          params.append("userId", this.$store.getters.getUser.userId);
           params.append("payPassword", this.password);
          axios
            .post("/fl-bookOrder/payForOrderByBalance", params)
            .then((res) => {
              ;
              if (res.data.code == 200) {
                this.$message({
                  message: "支付成功",
                  type: "success",
                });
                setTimeout(() => {
                   this.$router.go(0);
                }, 1000);
               
              } else if (res.data.code == 404) {
                if(this.$store.getters.getUser.accountBalance < this.price){
                  this.$confirm("您的余额不足是否充值?", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(() => {
                    this.$router.push("/pay");
                    this.$message({
                      type: "success",
                      message: "请充值!",
                    });
                  })
                  .catch(() => {
                    this.$message({
                      type: "info",
                      message: "已取消",
                    });
                  });
                }else{
                  this.$message({
                    message:'支付密码输入错误',
                    type: "warning",
                  });
                }
                
              }
            });
        },
    wx() {
      ;
    },
  },
  watch: {
    $route: {
      handler(val, oldval) {
        //通过路由监听来解决路由缓存导致页面不刷新bug
        this.caidan_type = val.fullPath;
        ; //新路由信息
        if (val.fullPath != oldval.fullPath) {
          this.orderId = this.$route.query.id; //传过来的ISBN
          this.get_order();
          // this.$router.to(0);
          setTimeout(() => {
            ;
          }, 3000);
        }
        ; //老路由信息
      },
      // 深度观察监听
      deep: true,
    },
  },
  created() {
    this.orderId = this.$route.query.id; //传过来的ISBN
    this.get_order();
    // this.$router.to(0);
    setTimeout(() => {
      ;
    }, 3000);
  },
};
</script>

<style lang="less">
.xq_tou {
  margin-left: 10px;
}
.xq_statu {
  width: 70%;
  margin-top: 10px;
  float: none;
  .status {
    font-size: 30px;
    color: #000;
    margin-bottom: 10px;
    line-height: 1;
  }
  .btn {
    height: 40px;
    margin-top: -50px;
    background: red;
    color: #fff;
  }
}

.order-info {
  margin-top: 20px;
  font-family: "microsoft yahei";
  margin-left: 10px;
  width: 70%;
  .title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
  }
  .user-info {
    padding: 4px 30px 10px;
    background-color: #f5f5f5;
    line-height: 2;
    padding: 10px 30px;
    font-size: 0;
    .btn-im {
      color: #e2231a;
    }
    a {
      text-decoration: none;
      outline: 0 none;
      margin-left: 30px;
    }
    .name {
      display: inline-block;
      font-size: 12px;
      color: #939393;
    }
    .txt {
      display: inline-block;
      font-size: 12px;
      color: #000;
      .red {
        color: #d91f20;
      }
      b {
        margin-right: 5px;
      }
    }
  }
}
.el-card__body {
  padding: none;
}

.xq_booklist {
  padding: 10px;
  width: 70%;
  float: none;
}

.xq_price {
  width: 70%;
  .presale-price-info {
    overflow: hidden;
  }
  .price-info {
    margin-top: 20px;
    text-align: right;
    font-family: "microsoft yahei";
    margin-bottom: 67px;
    .name {
      display: inline-block;
      width: 120px;
      color: #939393;
    }
    .cost {
      display: inline-block;
      padding-right: 5px;
      width: 130px;
      text-align: right;
      font-weight: 700;
      color: #333;
    }
    .clr {
      display: block;
      overflow: hidden;
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
    }
    .detail {
      float: right;
      border-bottom: 1px dashed #ddd;
      padding-bottom: 16px;
    }
    .total {
      margin-top: 10px;
      float: right;

      .cost {
        font-size: 18px;
        font-weight: 700;
        color: #dc1d20;
      }
    }
  }
}
</style>
